<template>
  <div class="summary-search-table">
    <a-table class="table" 
      :columns="columns" 
      :data-source="processedData"
      size="small"
      :pagination="false"
      :scroll="{ x: 1700 , y: 400}">
    </a-table>
    <div class="numbers">
      <div class="total-amount">
        <h3>总金额：</h3><h3>{{totalAmount}}</h3>
      </div>
      <div class="order-quantity">
        <h3>订单量：</h3><h3>{{orderQuantity}}</h3>
      </div>
      <div class="delivery-quantity">
        <h3>送货单量：</h3><h3>{{deliveryQuantity}}</h3>
      </div>
    </div>
  </div>
</template>

<script>
import {
  summaryColumns
} from './init/tableInit.js';

import {
  divide3Float3Fixed
} from '@/utils/NumberChange';

import {
  dateNumFormat
} from '@/utils/commonFunc.js';

export default {
  name: "SummarySearchTable",
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      columns: summaryColumns,
      totalAmount: 0,
      orderQuantity: 0,
      deliveryQuantity: 0,
    };
  },
  computed: {
    processedData() {
      this.totalAmount = 0;
      const deliveryIdSet = new Set(this.data.map((value) => value.deliveryId));
      this.deliveryQuantity = deliveryIdSet.size;

      const ans = this.data.map((value) => {
        const item = Object.assign({}, value);
        item.key = item.id;
        item.orderId = item.id;
        this.totalAmount += item.amount;
        item.deliveryDate = dateNumFormat(item.deliveryDate);
        item.price = divide3Float3Fixed(item.price);
        item.amount = divide3Float3Fixed(item.amount);
        delete item.id;
        return item;
      })
      this.totalAmount = divide3Float3Fixed(this.totalAmount);
      this.orderQuantity = ans.length;
      return ans;
    },
    
  },
  mounted() {
  },
  watch: {
  },
  methods: {
  },
  components: {
  },
};
</script>

<style scoped lang="scss">
.summary-search-table {
  >.table {
    width: calc(100vw - 350px);
  }

  .numbers {
    display: flex;
    justify-content: flex-end;

    >div {
      display: flex;
      margin-left: 30px;
    }

    padding-right: 30px;
  }
}
</style>
<style lang="scss">
.summary-search-table {
  >.table {
    
    .ant-table-header {
      min-width: auto !important;
    }

    .ant-table-row:hover {
      cursor: pointer;
    }
  }
}
</style>
